<template>
    <div class="home" :style="'background-image:url('+info.resourcesPath+') '">
        <div class="section">
            <header>
                <h1>{{corpName}}</h1>
                <h5>智能数据系统</h5>
            </header>
            <content>
                <el-button class="button-style" type="primary" @click="gotoGoodList">
                    <i class="icon icon--goods"></i>全部货品
                </el-button>
                <el-button class="button-style" type="primary" @click="gotoInfo">
                    <i class="icon icon--info"></i>企业信息
                </el-button>
            </content>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import { Button } from 'element-ui'
    import service from '../../service/Service'
    export default {
        middleware: 'domain',
        components: {
            'el-button': Button,
        },
        computed: {
            ...mapState(['domain', 'corpName']),
        },
        async asyncData (context) {
            let { data } = await service.getCorpInfo(context.store.state.domain, context)
            return {
                info: data.result,
            }
        },
        methods: {
            gotoGoodList () {
                this.$router.push({
                    name: 'domain-goods-listAll',
                    query: {
                        categoryId: -1,
                        categoryName: '全部分类',
                    },
                })
            },
            gotoInfo () {
                this.$router.push({
                    name: 'domain-info',
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .home {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
    }
    .section{
        position: absolute;
        text-align: center;
        width: 100%; 
        top: 50%;
        height: 200px;
        margin-top: -220px;
    }
    header {
        h1 {
            font-size: 60px;
            color: #fff;
            margin-bottom:30px;
            letter-spacing: 3px;
        }
        h5 {
            color: #f9f9f9;
            margin-bottom:40px;
            letter-spacing: 3px;
        }
    }
    .button-style {
        border-radius: 0;
        background-color: #1ca4fc;
        border-color: #1ca4fc;
        padding: 10px 25px;
    }
    .el-button+.el-button {
        margin-left: 20px;
    }
    .icon {
        height: 16px;
        width: 20px;
        display: inline-block;
        margin-right: 10px;
        vertical-align: sub;
    }
    .icon--info {
        background: url(../../assets/images/icon-info.png) no-repeat;
    }
    .icon--goods {
        background: url(../../assets/images/icon-goods.png) no-repeat;
    }
</style>
